import HomeView from '../views/Home'
import LoginView from '../views/Login'
import NotFoundView from '../views/NotFound'
// import NotFoundView from '@/views/NotFound'

import HomeDefaultView from "@/views/Home/Content"
import BannerListView from "@/views/Banner/BannerList"
import BannerAddView from "@/views/Banner/BannerAdd"
import BannerShowView from "@/views/Banner/BannerShow"

import ProShowView from "@/views/Product/Show";
import ProListView from "@/views/Product/List";

import AdminAddView from "@/views/Admin/AdminAdd";
import AdminListView from "@/views/Admin/AdminList";


const routes = [
    // 一级视图
    {
        path: '/',
        name: 'root',
        component: HomeView,

        // 二级视图
        children: [{
            path: "",
            redirect: "/home"
            // name: "home",
            // component: HomeDefaultView, //默认展示主页
        }, {
            path: "/home",
            name: "home",
            label: "首页",
            icon: "",
            component: HomeDefaultView
        },

        // 三级视图  => 又要新增router-view作为三级视图 (麻烦)
        // {
        //     path:"/banner",
        //     name:"banner",
        //     children:[
        //         {path:"/banner/show"},
        //         {path:"/banner/list"},
        //         {path:"/banner/add"},
        //     ],
        // },
        
        {
            path: "/banner/show",
            name: "bannerShow",
            label: "轮播展示",
            icon: "",
            parent: {
                path: "/banner",
                name: "banner",
                label: "轮播管理",
                icon: "",
            },
            component: BannerShowView
        },{
            path: "/banner/list",
            name: "bannerList",
            label: "轮播列表",
            icon: "",
            parent: {
                path: "/banner",
                name: "banner",
                label: "轮播管理",
                icon: "",
            },
            component: BannerListView
        },  {
            path: "/banner/add",
            name: "bannerAdd",
            label: "轮播新增",
            icon: "",
            parent: {
                path: "/banner",
                name: "banner",
                label: "轮播管理",
                icon: "",
            },
            component: BannerAddView
        },
        {
            path: "/pro/list",
            name: "proList",
            label: "商品列表",
            icon: "",
            parent: {
                path: "/pro",
                name: "pro",
                label: "商品管理",
                icon: "",
            },
            component: ProListView
        },
        {
            path: "/pro/show",
            name: "proShow",
            label: "商品展示",
            icon: "",
            parent: {
                path: "/pro",
                name: "pro",
                label: "商品管理",
                icon: "",
            },
            component: ProShowView
        },{
            path: "/admin/list",
            name: "adminList",
            label: "管理员列表",
            icon: "",
            parent: {
                path: "/admin",
                name: "admin",
                label: "人员管理",
                icon: "",
            },
            component: AdminListView
        },{
            path: "/admin/add",
            name: "adminAdd",
            label: "管理员新增",
            icon: "",
            parent: {
                path: "/admin",
                name: "admin",
                label: "人员管理",
                icon: "",
            },
            component: AdminAddView
        }],
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
    {
        path: '/404',
        name: 'notfound',
        component: NotFoundView
    },
    {
        path: '*',
        redirect: (from) => {
            return { name: "notfound", query: { wd: from.params.pathMatch } }
        }
    },
    // {
    //   path: '/about',
    //   name: 'about',
    //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    // }
];



const transformRoutesToMenus = (routes) => {
    let items = routes[0].children;
    let mapMenus = {};  // 存储菜单信息

    // 用对应的一级菜单名称，作为对象的属性，可以判断该菜单有没有被创建 (通过二级菜单生成一级时比较好用)
    // let mapMenus = {
    //     home: {path: "/home",name: "home",label:"首页",icon:""},
    //     banner: {path:"/banner",name:"banner",label:"轮播管理",icon:"",children:[]}
    // }; 


    // 遍历 根路由下子路由 -> 主页面相关配置 (菜单  -> 所有人均可访问)
    items.forEach((item) => {
        if (item.path == "") return false;
        if (!item.parent) { //如果配置对象中不存在 parent属性 -> 一级菜单
            mapMenus[item.name] = { path: item.path, name: item.name, label: item.label, icon: item.icon }
        } else { // 存在parent属性  => 二级菜单(有公共的一级  item.parent.name)

            // 通过二级菜单找到对应的一级菜单name  => 判断是否在mapMenu中存在 
            // 不存在 -> 该对象还未配置对应的一级菜单  -> 自己配置
            // 存在  -> 该对象对应的一级菜单已经配置  -> 在children中新增二级菜单的配置
            if (!mapMenus[item.parent.name]) {  // 二级菜单对应的一级菜单还未配置
                mapMenus[item.parent.name] = {
                    // 先配置一级菜单
                    path: item.parent.path,
                    name: item.parent.name,
                    label: item.parent.label,
                    icon: item.parent.icon,
                    // 再放置当前的二级菜单
                    children: [{
                        path: item.path,
                        name: item.name,
                        label: item.label,
                        icon: item.icon
                    }]
                }

            } else { // 二级菜单对应的一级菜单已经配置
                mapMenus[item.parent.name].children.push({
                    path: item.path,
                    name: item.name,
                    label: item.label,
                    icon: item.icon
                })

            }



        }


    })

    // console.log(mapMenus);
    console.log(11111, Object.values(mapMenus));
    return Object.values(mapMenus)


}

export const menus = transformRoutesToMenus(routes);

// ["/home", "/banner", "/banner/show", "/banner/list", "/banner/add"]
// roleInfo ={role: 1/2/3, checkedkeys:["/home", "/banner", "/banner/show", "/banner/list", "/banner/add"]}

// ["/home",  "/banner/list", "/banner/add"]

// menus => 所有的菜单
// roleInfo => 角色信息,允许访问的菜单项

// 根据menus -> 将允许展示的菜单项选择出来 -> 删除不允许展示的菜单项 (删除操作可能会影响原菜单)
export const generatorMenuByRole = (menus,roleInfo) =>{
    let _menus = JSON.parse(JSON.stringify(menus));  // 深拷贝
    let {role,checkedkeys} = roleInfo;

    if(role==1){ // 如果是超级管理员 => 可以访问所有的
        return _menus;
    }else if(role == 2 || role == 3){
        let list = []; // 存储允许访问的
        _menus.forEach((v)=>{  // 遍历一级菜单
            if(checkedkeys.includes(v.path)){  // 一级菜单存在 -> 该菜单及其以下的肯定可以访问
                list.push(v);
            }else{  // 一级菜单中不存在  => 二级菜单中可能会存在
                var subMenu = v.children;
                var subList = [];
                subMenu.forEach(item=>{   // 遍历二级菜单
                    if(checkedkeys.includes(item.path)){  // 是菜单中允许访问的
                        subList.push(item)
                    }
                })
                if(subList.length > 0){ //存在可以访问的二级菜单
                    v.children = subList;  // 将菜单中的children覆盖为 能被访问的 
                    list.push(v);
                }
            }

        })
        return list;
    }

}

export default routes;